<template>
  <a-tabs style="background-color: white" v-model:active-key="currentPage" size="mini">
    <a-tab-pane v-for="item of tabList" :key="item.value" :title="setTitle(item)" />
  </a-tabs>

  <SalesOutReceiptTableBody :currentIndex="currentPage" />
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs } from 'vue'
  import { getOrderPackageStatusNum } from '@/api/order'
  import SalesOutReceiptTableBody from './components/salesOutReceiptTableBody.vue'
  interface itemType {
    label: string
    num?: string
    value: string
  }
  export default defineComponent({
    components: {
      SalesOutReceiptTableBody,
    },
    setup() {
      const data: any = reactive({
        currentPage: '',
        tabList: [
          { label: '全部', value: '' },
          { label: '待处理', num: '222', value: 'TO_HAND' },
          { label: '拣货中', num: '333', value: 'IN_PICKING' },
          { label: '待出库', num: '444', value: 'TO_OUTBOUND' },
          { label: '已出库', num: '444', value: 'HAS_OUTBOUND' },
          { label: '已运出', num: '444', value: 'HAS_SHIPPED' },
          { label: '跟踪异常', num: '444', value: 'ERROR_TRACK' },
          { label: '已交付', num: '444', value: 'HAS_DELIVERY' },
        ],
        status: '',
      })

      const setTitle = (item: itemType) => {
        if (item.num) {
          return `${item.label}(${item.num})`
        } else {
          return `${item.label}`
        }
      }

      const getNum = async () => {
        const res: any = await getOrderPackageStatusNum()
        data.tabList[1].num = res?.data?.toCheck || 0
        data.tabList[2].num = res?.data?.inPicking || 0
        data.tabList[3].num = res?.data?.toOutbound || 0
        data.tabList[4].num = res?.data?.hasOutbound || 0
        data.tabList[5].num = res?.data?.hasShipped || 0
        data.tabList[6].num = res?.data?.errorTrack || 0
        data.tabList[7].num = res?.data?.hasDelivery || 0
      }

      getNum()

      return {
        ...(toRefs(data) as any),
        setTitle,
      }
    },
  })
</script>

<style lang="less" scoped></style>
